<template>
<div style="padding: 10px;">
    <!-- 搜索功能 -->
    <div class="search-area">
      <el-row :gutter="20">
        <el-col :span="5">
          <el-form :inline="true" :model="formSearch" class="demo-form-inline">
            <el-form-item label="设备状态" prop="online_status">
              <el-select
                clearable
                v-model="formSearch.online_status"
                placeholder="请选择设备状态"
                class="custom-select"
              >
                <el-option label="在线" :value="1"></el-option>
                <el-option label="离线" :value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="5">
          <el-form :inline="true" :model="formSearch" class="demo-form-inline">
            <el-form-item label="绑定状态" prop="bind_status">
              <el-select
                clearable
                v-model="formSearch.bind_status"
                placeholder="请选择设备绑定状态"
                class="custom-select"
              >
                <el-option label="未绑定" :value="0"></el-option>
                <el-option label="已绑定" :value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="5">
          <el-form :inline="true" :model="formSearch" class="demo-form-inline">
            <el-form-item label="设备名称" prop="name">
              <el-input
                clearable
                v-model="formSearch.name"
                placeholder="请输入设备名称"
                class="custom-input"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="4" style="text-align: right;">
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="toSearch"
            class="search-btn"
          >
            搜索功能
          </el-button>
        </el-col>
        <el-col :span="5" style="text-align: right;">
          <el-button
            type="primary"
            @click="toAdd"
            icon="el-icon-plus"
            class="action-btn"
          >
            录入设备
          </el-button>
        </el-col>
      </el-row>
    </div>

    <!-- 数据表格 -->
    <div class="table-area">
      <el-table
        :data="empData"
        style="width: 100%"
        :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
      >
        <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
        <el-table-column
          prop="serial_number"
          label="设备编号"
          width="180"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="设备名称"
          min-width="400"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="online_status"
          label="在线状态"
          align="center"
          width="120"
        >
          <template v-slot="scope">
            <el-tag
              :type="scope.row.online_status === 1 ? 'success' : 'danger'"
              effect="dark"
            >
              {{ scope.row.online_status === 1 ? '在线' : '离线' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="bind_status"
          label="绑定状态"
          align="center"
          width="120"
        >
          <template v-slot="scope">
            <el-tag
              :type="scope.row.bind_status === 1 ? 'primary' : 'warning'"
              effect="dark"
            >
              {{ scope.row.bind_status === 1 ? '已绑定' : '未绑定' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="200"
          fixed="right"
        >
          <template v-slot="scope">
            <el-button
              type="text"
              icon="el-icon-edit"
              @click="toEdit(scope.row)"
              style="color: #409EFF;"
            >
              修改设备信息
            </el-button>
            <el-button
              type="text"
              icon="el-icon-delete"
              @click="toDelete(scope.row.id)"
              style="color: #F56C6C; margin-left: 15px;"
            >
              删除设备
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页功能 -->
    <div class="pagination-area" style="margin-top: 20px;">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="params.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="params.pageSize"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :pager-count="5"
      ></el-pagination>
    </div>

    <!-- 录入与修改的抽屉 -->
    <el-drawer
      :title="drawerTitle"
      :visible.sync="drawerVisible"
      direction="rtl"
      size="30%"
      :before-close="handleClose"
    >
      <div style="padding: 20px;">
        <el-form
          ref="deviceForm"
          :model="form"
          :rules="rules"
          label-width="100px"
        >
          <el-form-item label="设备编号" prop="serial_number">
            <el-input
              v-model="form.serial_number"
              placeholder="请输入设备编号"
            ></el-input>
          </el-form-item>
          <el-form-item label="设备名称" prop="name">
            <el-input
              v-model="form.name"
              placeholder="请输入设备名称"
            ></el-input>
          </el-form-item>
        </el-form>
        <div style="text-align: right; margin-top: 20px;">
          <el-button @click="drawerVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { get, del, post } from '@/utils/request'

export default {
  data() {
    return {
      formSearch: {
        online_status: undefined,
        bind_status: undefined,
        name: ''
      },
      empData: [],
      params: {
        page: 1,
        pageSize: 10
      },
      total: 0,
      drawerVisible: false,
      drawerTitle: '录入设备信息',
      form: {
        serial_number: '',
        name: ''
      },
      rules: {
        serial_number: [
          { required: true, message: '请输入设备编号', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入设备名称', trigger: 'blur' }
        ]
      },
      currentRow: null
    }
  },
  methods: {
    toSearch() {
      this.params.page = 1
      this.getEmpData()
    },
    async getEmpData() {
      const params = {
        ...this.params,
        ...this.formSearch
      }
      const res = await get('/device/pageQuery', params)
      this.empData = res.data.list
      this.total = res.data.total
    },
    toAdd() {
      this.drawerTitle = '录入设备信息'
      this.currentRow = null
      this.resetForm()
      this.drawerVisible = true
    },
    toEdit(row) {
      this.drawerTitle = '修改设备信息'
      this.currentRow = row
      this.form = {
        serial_number: row.serial_number,
        name: row.name
      }
      this.drawerVisible = true
    },
    toDelete(id) {
      this.$confirm('此操作将永久删除该设备, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await del('/device/deleteById', { id })
        this.$message({ type: 'success', message: '删除成功' })
        this.getEmpData()
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消删除' })
      })
    },
    handleSizeChange(val) {
      this.params.pageSize = val
      this.params.page = 1
      this.getEmpData()
    },
    handleCurrentChange(val) {
      this.params.page = val
      this.getEmpData()
    },
    submitForm() {
      this.$refs.deviceForm.validate(async (valid) => {
        if (valid) {
          if (this.currentRow) {
            await post('/device/update', { ...this.form, id: this.currentRow.id })
            this.$message({ type: 'success', message: '修改成功' })
          } else {
            await post('/device/create', this.form)
            this.$message({ type: 'success', message: '录入成功' })
          }
          this.drawerVisible = false
          this.getEmpData()
        }
      })
    },
    resetForm() {
      this.form = {
        serial_number: '',
        name: ''
      }
      this.$refs.deviceForm.resetFields()
    },
    handleClose(done) {
      this.resetForm()
      done()
    }
  },
  created() {
    this.getEmpData()
  }
}
</script>

<style lang="scss" scoped>
.custom-select {
  width: 100%;
  ::v-deep .el-input__inner {
    border-radius: 4px;
  }
}

.custom-input {
  width: 100%;
  ::v-deep .el-input__inner {
    border-radius: 4px;
  }
}

.search-btn {
  padding: 10px 20px;
  ::v-deep .el-icon-search {
    margin-right: 5px;
  }
}

.action-btn {
  padding: 10px 20px;
  ::v-deep .el-icon-plus {
    margin-right: 5px;
  }
}

.el-table {
  ::v-deep th {
    background-color: #f5f7fa !important;
    color: #606266;
    font-weight: 500;
  }
  ::v-deep td {
    padding: 8px 0;
  }
}

.el-pagination {
  ::v-deep .el-pager li {
    min-width: 32px;
    height: 32px;
    line-height: 32px;
    margin: 0 4px;
    border-radius: 4px;
  }
  ::v-deep .btn-next,
  ::v-deep .btn-prev {
    min-width: 32px;
    height: 32px;
    border-radius: 4px;
  }
}
</style>